<template>
    <el-container class="include-container">
        <div class="card-wrap">
            <div class="card-list-header">
                <span class="card-title">角色管理</span>
                <div class="page-right">
                    <router-link :to="{ path: '/role/detail', query: { id: 0 } }">
                        <el-button type="primary" size="small">添加</el-button>
                    </router-link>
                </div>
            </div>
            <div style="width: 100%;border-bottom: 10px solid #F4F4F4;"></div>
            <div class="card-body-blank list-data-table">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="role_id" label="ID" width="200" align="center" />
                    <el-table-column prop="name" label="角色" width="400" align="center" />
                    <el-table-column label="权限范围" width="500" align="center">
                        <template #default="scope">
                            <el-popover placement="top-start" :width="300" trigger="hover" :content="scope.row.Titles">
                                <template #reference>
                                    <span>{{ getTruncatedTitle(scope.row.Titles) }}</span>
                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="280" align="center">
                        <template #default="scope">
                            <auth-router-link  :to="{path:'/role/detail',query:{ id: scope.row.role_id  } }" size="small" text="编辑" :route_name="'/role/detail'"></auth-router-link>
                            <auth-router-link  :to="{path:'/role/allot-role',query:{ id: scope.row.role_id  } }" size="small" text="权限范围" :route_name="'/role/allot-role'"></auth-router-link>
                            <auth-button @click="deleteData(scope.row.role_id)" type="default" size="small" text="删除" :route_name="'/sys/role/deleteRole'"></auth-button>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="card-footer">
                <div class="page-right">
                    <el-pagination small background @current-change="getData" layout="prev, pager, next" :total="total">
                    </el-pagination>
                </div>
            </div>
            <div style="height:120px"></div>
        </div>
    </el-container>
</template>
<script setup>
import AuthRouterLink from "../../components/AuthRouterLink.vue"
import AuthButton from "../../components/AuthButton.vue"
import { ref } from 'vue'
import { getRoleList,deleteRole } from "~/api/role"
import { toast } from "~/composables/util"
import { useRouter } from "vue-router"
import { useStore } from "vuex"
const router = useRouter()
const store = useStore()
// 分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const tableData = ref([])
const loading = ref(false)
// 获取数据
function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }
    loading.value = true
    getRoleList(currentPage.value, 10)
        .then(res => {
            if (res.code == 200) {
                tableData.value = res.data.list
                total.value = res.data.total
            } else {
                toast(res.msg, 'error')
            }
        })
        .finally(() => {
            loading.value = false
        })
}
getData()

function formatDate(time) {
    const date = new Date(time * 1000);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加一，并且补零
    const day = String(date.getDate()).padStart(2, '0');
    const hour = String(date.getHours()).padStart(2, '0');
    const minute = String(date.getMinutes()).padStart(2, '0');
    const second = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
// 截取标题并添加省略号的方法
const getTruncatedTitle = (title) => {
  return title.length > 20 ? title.substring(0, 20) + '...' : title;
};


function deleteData(val){
    deleteRole(val)
        .then(res => {
            if (res.code == 200) {
                toast(res.msg)
                getData();
            } else {
                toast(res.msg, 'error')
            }
        })
}

</script>